<template>
    <div class="menu-nav">
      <template v-for="item in routerData">
        <el-sub-menu :index="item.id" :key="item.id" v-if="item.children">
          <template v-slot:title>
            <el-icon style="margin-right:8px">
              <Location />
            </el-icon>
            <span>{{item.name}}</span>
          </template>
          <MenuItem :routerData="item.children" />
        </el-sub-menu>
        <el-menu-item :index="item.path" :key="item.id" v-else>
          <el-icon style="margin-right:8px">
            <IconMenu />
          </el-icon>
          <span>{{item.name}}</span>
        </el-menu-item>
      </template>
  
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue'
  import { Location, Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'MenuItem',
    components: {
      Location,
      Document,
      Setting,
      IconMenu
    },
    props: {
      routerData: {
        type: Array,
        default: () => []
      }
    }
  })
  </script>
  
  <style lang="css" scoped>
  .menu-nav :deep .el-menu-item, .menu-nav :deep .el-sub-menu__title{
    height: 42px;
    line-height: 42px;
  }
  </style>